<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-24 14:23:04
 *@描述:
!-->
<template>
	<div class="title-box">
		<div class="title-left">
			<div class="title-left-box">
				<div class="title-left-box-1"></div>
				<div class="title-left-box-text">{{ titleIndex }}</div>
			</div>
		</div>
		<div class="title-right">
			<div class="title-right-1">{{ titleName }}</div>
			<div class="title-right-2">
				<div class="title-right-2-line-left"></div>
				<div class="title-right-2-line-right"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	// 组件名称
	name: 'titleBox',
	// 组件参数 接收来自父组件的数据
	props: {
		titleIndex: {
			type: String,
			default: "",
		},
		titleName: {
			type: String,
			default: "",
		}
	},
	// 局部注册的组件
	components: {},
	// 组件状态值
	data () {
		return {}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {},
	created () {
	},
	mounted () {
	},
}
</script>

<style lang="less" scoped>
	.title-box {
		display: flex;
		align-items: center;
		height: 100%;
		.title-left {
			position: relative;
			flex: 0.4;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 70%;
			color: #4874cb;
			text-align: center;
			.title-left-box {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 300px;
				height: 300px;
				color: #fff;
				background: #dae3f5;
				border-radius: 32px;
				font-size: 8rem;
				font-weight: 600;
				.title-left-box-1 {
					width: 300px;
					height: 300px;
					background: #4874cb;
					border-radius: 32px;
					transform: rotate(75deg);
				}
				.title-left-box-text {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
		.title-right {
			display: flex;
			flex-direction: column;
			flex: 0.3;
			font-size: 5rem;
			font-weight: 600;
			color: #4874cb;
			.title-right-1 {
				margin-bottom: 40px;
				text-align: center;
				white-space: nowrap;
			}
			.title-right-2 {
				display: flex;
				.title-right-2-line-left {
					height: 20px;
					width: 50%;
					background: #f5b482;
				}
				.title-right-2-line-right {
					height: 20px;
					width: 50%;
					background: #dae3f5;
				}
			}
		}
	}
</style>
